<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts</title>
    <script src="../echarts/echarts.min.js"></script>
    <script src="../bootstrap/jquery.3.2.1.min.js"></script>
</head>
<body>
    考试：<select>
        <option value="1">2020一中高三上第一次模拟考试</option>
        <option value="2">2020巴中高三上全市第一次统考</option>
        <option value="3">2020一中高三上10月月考</option>
    </select><br><br>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        $(document).ready(function () {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            //数据加载完之前先显示一段简单的loading动画
            myChart.showLoading();
            $.ajax({
                url: "../echarts/subjectRank",    //请求发送到TestServlet处
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    var data = result.data;

                    myChart.hideLoading();    //隐藏加载动画
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    myChart.setOption({
                        title: {
                            text: '个人年级排名',
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {

                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: ['语文', '数学', '外语', '理综', '综合']
                        },
                        series: [

                            {
                                name:'2020一中高三上第一次模拟考试',
                                type: 'bar',
                                data: data
                            }
                        ]
                    })
                },
                error : function(errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            })

        })
    </script>
</body>
</html>